<!--
 * @Description: 
 * @Author: 张文韬
 * @Date: 2024-06-24 15:29:13
 * @LastEditTime: 2024-07-15 15:53:49
 * @LastEditors: 张文韬
 * @Reference: 
-->
<template>
  <div class="mb-10px flex flex-justify-end">
    <el-button type="primary"  @click="handleInsert">新增目的地</el-button>
  </div>
  <ETable 
    class="mb-20px"
    :data="destData" 
    :columns="destColumns" 
    :loading="loading">
    <template #handleSlot="{scope}">
      <el-button type="warning" @click="edit(scope.row)" size="small">编辑</el-button>
      <el-button type="danger" @click="remove(scope.row)" size="small">删除</el-button>
    </template>
  </ETable>
  <el-dialog
    v-model="dialogShow"
    title="目的地"
    :width="600"
    :before-close="handleCancel"
    :close-on-click-modal="false"
    :close-on-press-escape="false">
    <EForm
      v-if="dialogShow"
      ref="dialogForm"
      :form-options="editFormOptions"
      form-label-width="120px"
      :form-rules="editFormRules"
      :form-data-current="dialogFormCurrent"
    >
    </EForm>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>

import EForm from '@/components/e-form';
import ETable from '@/components/e-table'
import { editFormOptions, editFormRules, destColumns } from './config';
import { bbAddressSave, bbAddressEdit, bbAddressRemove } from '@/api/insurance';

const emit = defineEmits(['update'])

const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  data: {
    type: Array,
    default: () => []
  },
})

const destData = ref([])

// 编辑表单
const dialogForm = ref(null)
const dialogType = ref('add')
const dialogFormCurrent = ref({})
const dialogShow = ref(false)

const remove = ({id}) => {
  ElMessageBox.confirm(`确定要删除吗`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    center: true
  }).then(async () => {
    await bbAddressRemove({ id })
    emit('update')
  })
}

const edit = (row) => {
  dialogFormCurrent.value = row
  openDialog('update')
}

const handleInsert = () => {
  openDialog()
}

const openDialog = (type = 'add') => {
  dialogType.value = type
  dialogShow.value = true
}

const closeDialog = () => {
  dialogShow.value = false
}

const handleCancel = () => {
  closeDialog()
}

const handleConfirm = () => {
  dialogForm.value.handleValidate(async (validate) => {
    const o = { ...dialogForm.value.formData }
    if (validate) {
      const params = { ...o }
      if (dialogType.value == 'add') {
        await bbAddressSave(o)
      }
      else {
        await bbAddressEdit({...o, id: params.id })
      }
      handleCancel()
      emit('update')
    }
  })
}

watch(() => props.data, (newVal) => {
  console.log('watch', newVal);
  destData.value = newVal
}, { immediate: true })

onMounted(async() => {
  console.log('onMounted');
})

</script>